<template>
	<div>
		<van-cell-group>
			<van-nav-bar title="用户中心" left-arrow @click-left="back"/>
			<van-cell title="个人信息" clickable @click="showInfo" >
				<img :src="$store.getters.user.headimgurl" class="cell-headimg">
				<van-icon slot="right-icon" name="arrow" class="lh-20" />
			</van-cell>
			<van-cell title="账号安全" clickable @click="account=true">
				<van-icon slot="right-icon" name="arrow" class="lh-20" />
			</van-cell>
		</van-cell-group>
		<van-popup v-model="info" position="right" class="v-full" :overlay="false">
            <Info ref="info" :popup="true" :callback="closeInfo"></Info>
        </van-popup>
        <van-popup v-model="account" position="right" class="v-full" :overlay="false">
            <Account :popup="true" :callback="closeAccount"></Account>
        </van-popup>
	</div>
</template>
<script>
import { Cell, CellGroup,NavBar,Icon,Popup} from 'vant';

import Info from 'touch/components/home/ucenter/info';
import Account from 'touch/components/home/ucenter/account';

export default {
	props: {
        callback:{
            type: Function,
        },
        popup :{
        	type : Boolean,
        	default : false
        }
    },
    components: {
    	[Cell.name] : Cell,
    	[CellGroup.name] : CellGroup,
    	[NavBar.name] : NavBar,
    	[Icon.name] : Icon,
    	[Popup.name] : Popup,
    	Info,
        Account,
    },
    data () {
        return {
            info : false,
            account : false,
        }
    },
    methods :{
        back(){
        	if (this.popup) {
        		this.callback();
        	}else{
        		window.history.go(-1);
        	}
        },
        showInfo:function(){
            this.info=true;
            this.$nextTick(function () {
                this.$refs.info.init();
            })
        },
        closeInfo:function(){
        	this.info = false;
        },
        closeAccount:function(){
            this.account = false;
        }
    },
    mounted: function(){
        
    },
}
</script>
<style>
	.cell-headimg{width: 20px;height: 20px;border-radius: 50%;}
	.lh-20{line-height: 20px;}
</style>